<template>
	<view class="container">
	    <view class="list-header bg-white">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
	        <view class="solid-bottom">
	            <view class="cu-bar search">
	                <view class="search-form round">
	                    <text class="cuIcon-search"></text>
	                    <input type="text" placeholder="搜索用户姓名或手机号" v-model="keyword"></input>
	                </view>
	                <view class="action">
	                    <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
	                </view>
	            </view>
	        </view>
	    </view>
		<view class="list-body">
			<scroll-view scroll-y @scrolltolower="scrollTolower">
				<view class="cu-card article" v-for="(item,index) in listData" :key="index">
					<view class="cu-item">
						<view @click="toUserInfo(item)">
							<view class="title">
								<view class="text-cut text-orange">（{{item.userId}}）{{item.userName}}</view>
							</view>
							<view class="content">
								<view class="flex-sub">
									<view class="flex justify-between">
										<view><text class="tt">手机号：</text>{{item.userPhone}}</view>
										<view class="text-orange">{{item.roleTypeName}}</view>
									</view>
									<view v-if="item.note"><text class="tt">备注：</text>{{item.note}}</view>
									<view v-if="item.lastLoginDate"><text class="tt">最后登陆：</text>{{item.lastLoginDate}}</view>
									<view><text class="tt">加入时间：</text>{{item.createDate || '---'}}</view>
								</view>
							</view>
							<view class="flex justify-around margin-top-sm solid-top solid-bottom padding-top-xs padding-bottom-xs">
								<view class="text-center text-sm">
									<view>分配设备数</view>
									<view class="margin-top-sm">{{item.deviceCount || 0}}个</view>
								</view>
								<view class="solid-right"></view>
								<view class="text-center text-sm">
									<view>分配网点数</view>
									<view class="margin-top-sm">{{item.placeCount || 0}}个</view>
								</view>
							</view>
							<button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
						</view>
					</view>
				</view>
				<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
		<view class="cu-bar btn-group list-footer">
		    <button class="cu-btn bg-orange round" @click="toAdd()">新增合伙人</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[],
				keyword:'',
				pageNo:1,
				refreshLoad:true
			};
		},
		onLoad(option) {
			
		},
		onShow() {
			if(this.refreshLoad){
				this.refreshLoad = false;
				this.pageNo = 1;
				this.listData = [];
				this._loadListData();
			}
		},
		methods:{
			_loadListData:function(){
				if(this.pageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.teamUserList,{
						trim:this.keyword,
						roleType:3,
						pageNo:this.pageNo
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo + 1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			btnSearch:function(){
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			toUserInfo:function(item){
				uni.navigateTo({
					url:'../user/info?id='+item.userId
				});
			},
			toAdd:function(){
				this.refreshLoad = true;
				uni.navigateTo({
					url:'./edit'
				})
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style lang="less">
.list-body scroll-view{height:95vh;}
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.list-body .cu-card>.cu-item .title{line-height:50rpx;margin-top:15rpx;}
.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}
.list-body .cu-card>.cu-item .content{font-size:26rpx;}
.list-body .cu-card>.cu-item .content view{padding-top:2rpx;padding-bottom:2rpx;}
.list-body .cu-card>.cu-item .content .tt{min-width:130rpx;display: inline-block;text-align:right;}
.list-footer{position:fixed;bottom:0;width:100vw;}
</style>
